<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>双日历</title>
    <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/daterangepicker.css" />
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/moment.js"></script>
    <script type="text/javascript" src="js/daterangepicker.js"></script>
</head>

<body>
    <!-- <div class="bjui-pageContent">
        <div class="form-group d_t_dater">
            <label class="col-sm-3 control-label"></label>
            <div class="col-sm-12">
                <div class="input-group"> -->
    <button type="button" class="btn btn-default" id="daterange-btn">
                    <span>
                       日期选择
                    </span>
                    <i class="icon iconfont icon-danxian-youjiantou-copy"></i>
                  </button>
    <!-- </div>
            </div>
        </div>
    </div> -->
    <script type="text/javascript">
        $('.ranges_1 ul').remove();
        $('#daterange-btn').daterangepicker({
                ranges: {
                    '全部': [moment(), moment().subtract(-1, 'days')],
                    '今天': [moment(), moment()],
                    '明天': [moment().subtract(-1, 'days'), moment().subtract(-1, 'days')],
                    '未来七天': [moment(), moment().subtract(-6, 'days')],
                    '未来30天': [moment(), moment().subtract(-29, 'days')],
                    '未来60天': [moment(), moment().subtract(-59, 'days'), ]
                },
                startDate: moment(),
                endDate: moment()
            },
            function(start, end, label) {
                //label:通过它来知道用户选择的是什么，传给后台进行相应的展示
                //      console.log(label)
                if (label == '全部') {
                    $('#daterange-btn span').html('全部');
                } else if (label == '今天') {
                    $('#daterange-btn span').html(end.format('YYYY/MM/DD'));
                } else if (label == '明天') {
                    $('#daterange-btn span').html(start.format('YYYY/MM/DD'));
                } else if (label == '未来七天') {
                    $('#daterange-btn span').html(start.format('YYYY/MM/DD') + '-' + end.format('YYYY/MM/DD'));
                } else if (label == '未来30天') {
                    $('#daterange-btn span').html(start.format('YYYY/MM/DD') + '-' + end.format('YYYY/MM/DD'));
                } else if (label == '未来60天') {
                    $('#daterange-btn span').html(start.format('YYYY/MM/DD') + '-' + end.format('YYYY/MM/DD'));
                }
            }
        );
    </script>
</body>

</html>